<template>
  <div class="topHeader">
    <a-dropdown>
      <a @click.prevent> 欢迎 {{ state.nickname}}<DownOutlined class="down-icon"/></a>
      <template #overlay>
        <a-menu>
          <a-menu-item>
            <a @click="loginOut"><login-outlined style="margin-right:5px" />退出登录</a>
          </a-menu-item>
        </a-menu>
      </template>
    </a-dropdown>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue"
import { DownOutlined, LoginOutlined } from '@ant-design/icons-vue'
import { reactive } from "@vue/reactivity"
import { loginApi } from "@/api/commonApi"
import { clearLoginCache, getLocal } from "@/util/utils"
import router from "@/router"

export default defineComponent({
	name: "topHeader",
	components: {DownOutlined,LoginOutlined},
	setup() {
		const state = reactive({
			nickname: ''
		});

		const loginOut = async() =>{
			const res = await loginApi.out()
			if(res.success){
				clearLoginCache()
				router.push({path:'/login'})
			}
		}
		const account:any = getLocal('account')
		state.nickname = account.nickname

		return {
			state,
			loginOut,
		}
	},
});
</script>


<style lang="less" scoped>
.topHeader {
  display: flex;
  justify-content: flex-end;
  padding:0 40px;
  background-color: #EFF2F9;
  
  .down-icon {
    margin-left: 10px
  }
}

</style>